<template>
  <div class="profile-container">
    <div class="header-with-back">
      <a-button type="link" class="back-button" @click="goBack">
        <left-outlined />
        返回
      </a-button>
      <h2 class="page-title">个人中心</h2>
    </div>
    
    <a-tabs v-model:activeKey="activeTab">
      <a-tab-pane key="info" tab="个人信息">
        <user-info-form />
      </a-tab-pane>
      
      <a-tab-pane key="security" tab="账号安全">
        <div class="security-container">
          <password-change-form />
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { LeftOutlined } from '@ant-design/icons-vue';
import UserInfoForm from './components/UserInfoForm.vue';
import PasswordChangeForm from './components/PasswordChangeForm.vue';

// 活动标签页
const activeTab = ref('info');
// 路由
const route = useRoute();
const router = useRouter();

// 返回上一页或首页
const goBack = () => {
  // 判断是在管理后台还是用户界面
  if (route.path.startsWith('/admin')) {
    router.push('/admin'); // 在管理后台则返回管理后台首页
  } else {
    router.push('/'); // 在用户界面则返回首页
  }
};

// 组件挂载时自动根据路由切换到相应的标签
onMounted(() => {
  // 如果路由中有指定标签，则切换到该标签
  if (route.query.tab && ['info', 'security'].includes(route.query.tab)) {
    activeTab.value = route.query.tab;
  }
});
</script>

<style scoped>
.profile-container {
  width: 100%;
}

.header-with-back {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.back-button {
  padding-left: 0;
  display: flex;
  align-items: center;
}

.page-title {
  margin: 0 0 0 10px;
  font-weight: 500;
  color: #333;
}

.security-container {
  width: 100%;
  padding: 10px;
}
</style> 